
class Bibi {
    constructor() {
        this.url = "https://apis.netstart.cn/bcomic/ClassPage"
        this.section = document.querySelector("section")
        this.nav = document.querySelector(".nav-box")
        this.li = document.querySelector(".nav-box li")
        this.firstNum = "-1"
        this.secondNum = "-1"
        this.thirdNum = "-1"
        this.fourNum = "-1"
        this.fivetNum = "0"
    }
    init() {
        // 初始化页面
        this.request(this.url)
            .then(
                res => {
                    this.data = res.data
                    this.template(this.data)
                }
            )
        this.click()

    }
    request(url, style = -1, area = -1, Finish = -1, order = 0, Free = -1) {
        return new Promise((resolve, reject) => {
            $(".loading").show()
            $("section").hide()
            $.ajax({
                url,
                type: "get",
                data: {
                    styleId: style,
                    areaId: area,
                    isFinish: Finish,
                    order: order,
                    pageNum: '1',
                    pageSize: "50",
                    isFree: Free,
                },
                success(res) {
                    resolve(res)
                    $(".loading").hide()
                    $("section").fadeIn(1000)
                },
                error() {
                    reject("error")
                }
            })
        })
    }
    template(data) {
        this.str = ``
        data.forEach((item, i) => {
            this.str += `<div class="img-box">
            <div>
                <a href="#">
                    <img src=${item.vertical_cover} alt="">
                </a>
            </div>
               <p>${item.title}</p> 
               <p> ${item.is_finish==1?`[完结]共${item.total}话`:`更新至${item.last_ord}话`}</p> 
        </div>`
        })
        this.section.innerHTML = this.str
        console.log(data);
    }
    click() {
        $(".nav-box").on("click", "li", (e) => {
            let el = e.target
            $(el).siblings().removeClass("active")
            el.className = "active"
            this.request(this.url, this.firstNum, this.secondNum,this.thirdNum,this.fiveNum,this.fourNum,)
            .then(
                res => {
                    
                    this.data = res.data
                    this.template(this.data)

                }
            )
        })
        $(".first").on("click", "li", (e) => {
            let el = e.target
            this.firstNum = el.getAttribute("data-style")
        })
        $(".second").on("click", "li", (e) => {
            let el = e.target
            this.secondNum = el.getAttribute("data-style")
        })
        $(".third").on("click", "li", (e) => {
            let el = e.target
            this.thirdNum = el.getAttribute("data-style")
        })
        $(".four").on("click", "li", (e) => {
            let el = e.target
            this.fourNum = el.getAttribute("data-style")
        })
        $(".five").on("click", "li", (e) => {
            let el = e.target
            this.fiveNum = el.getAttribute("data-style")
        })
    }
}
new Bibi().init()